<template>
  <div class="p-15 bg-F5F5F5">
    <div class="flex">
      <img
        :src="
          userStore.avatarUrl(`${IMG_CDN_25}/digitalHuman/default_avatar.png`)
        "
        class="w-50 h-50 rounded-[50%]"
        alt=""
      />
      <div class="pl-10 flex-grow-1 w-0">
        <div class="text-18 h-24">{{ userStore.nickname }}</div>
        <div class="text-13 text-999999 mt-5">
          <span>{{ encryPhoneNumber(userStore.mobile) }}</span>
          <span class="iconfont icon-fuzhi pl-5" @click="copyUserHandle" />
        </div>
      </div>
    </div>
    <div class="mt-20">
      <van-image
        :src="`${IMG_CDN_39}/member/member_go_vip_banner4.png`"
        class="w-full h-80"
        radius="12"
        fit="cover"
        @click="navigateTo('PackageList')"
      />
    </div>
    <div class="mt-15 flex justify-between">
      <div
        class="pt-15 px-15 h-97 w-165 rounded-12 bg-white flex flex-col"
        @click="aiCoinHandle"
      >
        <div class="iconfont icon-AI text-20 text-black h-21" />
        <div class="text-20 font-bold mt-6 h-26">
          {{ userStore.aiCoinBalance }}
        </div>
        <div class="flex items-center mt-2 h-11">
          <div class="text-11 text-999999 leading-1">查看我的AI币</div>
          <div class="iconfont icon-gengduo text-10 text-CCCCCC" />
        </div>
      </div>
      <div
        class="pt-15 px-15 h-97 w-165 rounded-12 bg-white flex flex-col"
        @click="navigateTo('MyHuman')"
      >
        <div class="iconfont icon-shuziren text-20 text-black h-21" />
        <div class="text-20 font-bold mt-6 h-26">
          {{ userStore.humanAmount }}
        </div>
        <div class="flex items-center mt-2 h-11">
          <div class="text-11 text-999999 leading-1">查看我的数字人</div>
          <div class="iconfont icon-gengduo text-10 text-CCCCCC" />
        </div>
      </div>
    </div>
    <div
      class="mt-15 bg-white rounded-12 text-15 flex flex-col pl-15 pr-12 py-6"
    >
      <div
        v-for="item in menuList"
        :key="item.value"
        class="h-45 flex items-center"
        @click="navigateTo(item.value)"
      >
        <div class="iconfont text-18" :class="item.icon" />
        <div class="pl-10 leading-1 font-bold">{{ item.label }}</div>
        <div class="iconfont icon-gengduo text-12 text-CCCCCC ml-auto" />
      </div>
    </div>
    <!-- 使用独立的 AI 币充值组件 -->
    <AICoinRecharge v-model:show="aiCoinVisible" />
    <!-- AI数字人电脑端 -->
    <PcGuideDrawer v-model:show="showBottom" />
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { IMG_CDN_25, IMG_CDN_39 } from "@/constants";
import { copyToClipboard, encryPhoneNumber } from "@/utils";
import router from "@/router";
import AICoinRecharge from "@/views/Member/AICoinRecharge.vue";
import { useUserStore } from "@/store/modules/userStore";
// 导入用户 store

defineOptions({
  name: "Member"
});

// 用户 store
const userStore = useUserStore();

// 底部弹窗
const showBottom = ref(false);
// 菜单列表
const menuList = [
  { label: "我的订单", value: "OrderList", icon: "icon-dingdan" },
  { label: "推广赚钱", value: "Spread", icon: "icon-tuiguangzhuanqian" },
  { label: "电脑端", value: "PCGuideDrawerDom", icon: "icon-diannaoduan" },
  { label: "消息中心", value: "MessageList", icon: "icon-xiaoxi1" },
  { label: "联系客服", value: "OrderList", icon: "icon-kefu" },
  { label: "设置", value: "Setting", icon: "icon-xitongshezhi" }
];

// 导航到指定页面
const navigateTo = (routeName: string) => {
  // 打开电脑端
  if (routeName === "PCGuideDrawerDom") {
    showBottom.value = true;
    return;
  }
  if (routeName === "MyHuman") {
    router.push({
      name: routeName,
      params: { type: "myHuman" }
    });
    return;
  }
  router.push({ name: routeName });
};

// 获取用户数据
const copyUserHandle = () => {
  const userStr = `用户名:${userStore.nickname} 手机号:${userStore.mobile} 用户ID:${userStore.userId}`;
  copyToClipboard(userStr, {
    successMessage: "复制成功",
    successOptions: {
      icon: "success",
      duration: 1000
    }
  });
};

// AI币弹窗
const aiCoinVisible = ref(false);
// 展示AI币
const aiCoinHandle = () => {
  aiCoinVisible.value = true;
};

onMounted(() => {
  // 如果store中没有用户数据，则请求
  if (!userStore.userDetail) {
    userStore.fetchUserDetail();
  }
});
</script>

<style scoped lang="less">
.pc-guide-drawer {
  border-radius: 12px 12px 0 0;
  background-image: linear-gradient(180deg, #d5e2ff 0%, #ffffff 16%);
}
.guide-number {
  padding-right: 2px;
  border-radius: 5px 5px 15px;
  background-image: linear-gradient(139deg, #6c3dff 0%, #0f07ff 100%);
}
</style>
